<template>
  <div class="test-config-page-container">
    <div class="page-body-container" v-loading="pageLoading">
      <a-empty :image="simpleImage" v-if="dataSource.length == 0" />
      <a-row>
        <a-checkbox-group v-model="checkbox">
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24"
            :xl="12"
            :xxl="8"
            v-for="(item, index) in dataSource || []"
            :key="index"
          >
            <a-checkbox :value="item.trialNum">
              {{ item.trialName }}
            </a-checkbox>
          </a-col>
        </a-checkbox-group>
      </a-row>
    </div>
    <!-- 提交按钮 -->
    <div class="footer">
      <!-- <a-button @click="back()"> 取消 </a-button> -->
      <a-button
        :loading="submitLoading"
        :disabled="checkbox.length == 0"
        type="primary"
        style="margin-left: 10px"
        @click="onSubmit()"
      >
        确定
      </a-button>
    </div>
  </div>
</template>

<script>
import {
  queryTrialType,
  saveEquTrialType,
} from "@/api/user-center/equipmentManage.js";
import { Empty } from "ant-design-vue";
export default {
  data() {
    return {
      submitLoading: false,
      pageLoading: false,
      dataSource: [],
      checkbox: [],
    };
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  },
  mounted() {
    this.getData();
  },
  methods: {
    //
    getData() {
      this.pageLoading = true;
      return new Promise((resolve, reject) => {
        let { tenantCode, equNum } = this.$route?.query || {};
        queryTrialType({
          tenantCode,
          equCode: equNum,
        })
          .then((res) => {
            let { data } = res;
            this.dataSource = data?.result?.trialTypeList || [];
            (data?.result?.equTrialTypeList || []).forEach((v) => {
              let { trialNum } = v;
              if (trialNum) {
                this.checkbox.push(trialNum);
              }
            });
          })
          .catch((_) => {
            this.dataSource = [];
          })
          .finally((_) => {
            this.pageLoading = false;
          });
      });
    },
    //提交
    onSubmit() {
      this.submitLoading = true;
      let { tenantCode, equNum } = this.$route?.query || {};
      let requestParams = [];
      this.checkbox.forEach((v) => {
        requestParams.push({
          tenantCode,
          equCode: equNum,
          trialNum: v,
        });
      });
      saveEquTrialType({
        data: JSON.stringify(requestParams),
      })
        .then((res) => {
          let { data } = res;
          if (data?.result) {
            this.$message.success("操作成功");
          } else {
            this.$message.error("操作失败，请稍后重试！");
          }
        })
        .catch((_) => {
          this.$message.error("操作失败，请稍后重试！");
        })
        .finally((_) => {
          this.submitLoading = false;
        });
      //
    },

    //返回
    back() {
      this.$router.push({
        path: `/nebula/user-app/projectConfig`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.test-config-page-container {
  height: 100%;
  .flex();
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px 0 10px 10px;
  /deep/.ant-empty-normal {
    margin: 0;
  }
  .page-title-container {
    height: 46px;
    background: #ffffff;
    justify-content: space-between;
    padding: 0 20px;
    align-items: center;
    border-bottom: 1px solid #e8ebf0;
    &::before {
      .flex();
      align-items: center;
      content: attr(title);
      font-size: 16px;
      height: 16px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
    }
  }
  .page-body-container {
    flex: 1;
    flex-wrap: wrap;
    background: #fff;
    .custom-scrollbar();
    /deep/.ant-row {
      .ant-col {
        margin-bottom: 30px;
      }
      .ant-checkbox-group {
        width: 100%;
      }
    }
  }
  .footer {
    height: 72px;
    border-top: 1px solid #f3f4f6;
    margin-top: 18px;
    .flex();
    justify-content: center;
    align-items: center;
  }
}
</style>
